<template>
  <el-upload
    class="avatar-uploader"
    :headers="headers"
    list-type="picture-card"
    :show-file-list="false"
    accept=".jpg, .jpeg, .png, .gif"
    :action="$uploadPath"
    :on-success="handleImageSuccess"
  >
    <el-image
      v-if="imageUrl.length > 1"
      class="avatar"
      :src="$downPath + imageUrl"
    />
    <i v-else class="el-icon-plus avatar-uploader-icon" />
  </el-upload>
</template>
<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'UploadImage',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tempUrl: ''
    }
  },
  computed: {
    imageUrl() {
      return this.value
    },
    headers() {
      return {
        'Authorization': 'Bearer ' + getToken()
      }
    }
  },
  methods: {
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      this.$emit('input', val)
    },
    handleImageSuccess(res, file, fileList) {
      if (res.code === '0') {
        this.emitInput(res.data.url)
      }
    }
  }
}
</script>
